<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>虚拟列表</title>
</head>
<body>
    <ul id="app"></ul>
    <script>
        // 创建函数
        function createElementLi(ul,data,index,last){
            for(let i = 0;i < last - index;i++) {
                let li = document.createElement('li')
                li.innerText = index + i + ' : ' + ~~(Math.random() * data.length)
                ul.appendChild(li)
            }
        }
        let ul = document.getElementById('app')
        // 模拟十万条数据
        let data = []
        for(let i = 0;i < 1000000;i++) {
            data.push(i)
        }
        // 初始化
        createElementLi(ul,data,0,50)
        window.addEventListener('scroll',function() {
            console.log(ul.offsetTop)
            console.log(ul.scrollTop);
        },true)
    </script>
</body>
</html>